<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>

</head>
<body>

    <div id="app">

        <cp1 a="1" :b="ct" :d="999" :e="88" :getkops="kops" :scf="666"></cp1>
    </div>
    <script>

        // 全局注册组件 Vue.component(组件名称,组件的配置)
        // 组件的事情组件内部解决 组件的作用域
        Vue.component('cp1',{
            // props 声明 可以在使用组件的时候传递进来的自定义属性的名称
            // 只有通过props声明的属性才能获取传递的值
            // props: [ 'a', 'b' ],    // 第一种写法 写成数组 数组当中指定接受的属性的名称
            props:{ // 第二种写法是对象  在接受属性的同时还可以进行一些独立的配置比如说类型约束和默认值等
                a: Number ,//  属性：期望接收的数据类型
                b:{
                    type: String
                },
                c:{
                    type: Number,
                    required:true, // 约定这个c属性是必填项
                },
                d:{
                    type: Number,
                    default: 789, // 设置一个默认值 如果没有传递的话就采用  默认值
                },
                f:{
                    type: Object,
                    // 如果希望给  对象或者是数组类型的自定义属性设置默认值
                    // 必须写成 工厂函数返回一个对象
                    default(){
                        return  {
                            name: 'dixon',
                            age: 17
                         }
                    } 
                },
                e:{
                    // 对于传递的值 会经过一个函数的校验 根据返回的布尔值来决定是否符合条件
                    validator(val){
                        // val 就等于 传递过来的值
                        console.log('val',val)
                        if( val >= 100) return true
                        return false
                    }
                },
                // getKops:{
                //     type: String,
                //     default(){
                //         return  {
                //             name: 'dixon',
                //             age: 17
                //          }
                //     } 
                // }
                getkops:{
                    type: String
                },
            },
            // // props:[getkops],
            template:`<div> 
                            我是一个头部 {{ ct }} 
                            <button @click="fn1">我是一个按钮</button>
                            <div> props a : {{ a }}</div>
                            <div> props b : {{ b }}</div>
                            <div> props d : {{ d }}</div>
                            <div> props f : {{ f }}</div>
                            <div> props getkops : {{ getkops }}</div>
                            <button @click="fn1">0000</button>
                            <div>{{  $attrs.scf  }}</div>
                      </div>`,   
            data(){
                return { 
                    ct:1
                }
            },
            methods:{
                fn1(){
                    console.log(this)
                    
                    console.log('我是 cp1组件的 fn1')
                }
            }
        })

        // el data  computed watch  methods  filters
        new Vue({
            el: '#app',
            data:{
                ct:'555',
                kops:"父组件props传递方式",
            },
            methods:{
                fn1(){
                    console.log('我是 根实例的 fn1')
                }
            }
        })
    </script>


</body>
</html>